<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表3</title>
</head>
<script type="text/javascript" src="../vue.js"></script>


<body>

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">

  <ul>姓名-年龄
    <li v-for="(person,index) of filPersons" :key="person.id">{{person.name}}-{{person.age}}--{{person.sex}}</li>
  </ul>
</div>


</body>

<script type="text/javascript">

  Vue.config.productionTip = false



  //用watch实现
  // new Vue({
  //   el:'#root',
  //   data:{
  //     keyWord:'',
  //     persons:[
  //       {id:'001',name:'马冬梅',age:18,sex:'女'},
  //       {id:'002',name:'周冬雨',age:14,sex:'女'},
  //       {id:'003',name:'周杰伦',age:13,sex:'男'},
  //       {id:'004',name:'温兆伦',age:15,sex:'男'},
  //     ],
  //     filPersons:[],
  //   },
  //   watch:{
  //     keyWord:{
  //       immediate: true,
  //       handler(value){
  //         this.filPersons = this.persons.filter((person)=>{
  //           return person.name.indexOf(value) !== -1
  //         })
  //         // console.log(value)
  //       }
  //     }
  //   }
  //
  // })

  //用computed实现
  new Vue({
    el:'#root',
    data:{
      keyWord:'',
      persons:[
        {id:'001',name:'马冬梅',age:18,sex:'女'},
        {id:'002',name:'周冬雨',age:14,sex:'女'},
        {id:'003',name:'周杰伦',age:13,sex:'男'},
        {id:'004',name:'温兆伦',age:15,sex:'男'},
      ],
    },
    computed:{
      filPersons(){
        return this.persons.filter((person)=>{
          return  person.name.indexOf(this.keyWord) !== -1
        })
      }
    }
  })
</script>
</html>